<template>
    <div class="exam-push-check">
            <div class="zh-table">
                <div class="zh-table-open clear">
                            <div class="zh-open-left fl">
                        <div class="open-width" v-if="user_level === 0">
                            <el-select v-model="platform_id" filterable placeholder="来源学校/教育局">
                                <el-option
                                    v-for="item in platformList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                                    </div>
                        <div class="open-width" style="width: 100px;">
                            <el-select v-model="status" filterable placeholder="状态">
                                <el-option label="全部状态" :value="-1"></el-option>
                                <el-option label="未审核" :value="1"></el-option>
                                <el-option label="已通过" :value="2"></el-option>
                                <el-option label="已拒绝" :value="3"></el-option>
                            </el-select>
                                </div>
                        <div class="open-width">
                            <el-input placeholder="试卷名称" v-model="keyword" @keyup.enter.native="search"></el-input>
                        </div>
                        <el-button type="primary" @click="search">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </div>
                </div>
                <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                    <el-table
                        :data="listData"
                        border
                        max-height="541"
                    >          
                        <el-table-column
                            type="index"
                            label="序号"
                            align="center"
                            width="50"
                            show-overflow-tooltip
                            >
                        </el-table-column>
                        <el-table-column
                            prop="source_name"
                            label="来源"
                            align="center"
                            show-overflow-tooltip
                            >
                        </el-table-column>
                        <el-table-column
                            prop="res_name"
                            label="试卷标题"
                            align="center"
                            show-overflow-tooltip
                            >
                        </el-table-column>
                        <el-table-column
                            prop="res_type"
                            label="类型"
                            align="center"
                            show-overflow-tooltip
                            >
                        </el-table-column>
                        <el-table-column
                            prop="grade_name"
                            label="年级"
                            align="center"
                            show-overflow-tooltip
                            >
                        </el-table-column>
                <el-table-column
                            prop="subject_name"
                            label="学科"
                            align="center"
                            show-overflow-tooltip
                            >
                        </el-table-column>
                        <el-table-column
                        prop="create_time"
                        label="上传时间"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                        prop="status_name"
                        label="审核状态"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        prop="handle"
                        label="操作"
                        align="center"
                        width="280"
                        >
                            <template slot-scope="scope">
                                <!-- 审核状态（全部：-1或不传 ；0：删除；1：待审核；2：批准；3：拒绝；） -->
                                <el-button @click="vivew(scope.row)" type="text" >预览</el-button>
                                <el-button v-if="scope.row.status === 2" type="text">已批准</el-button>
                                <el-button v-if="scope.row.status === 1" type="text" @click="passTrigger(scope.row)">批准</el-button>
                                <el-button v-if="scope.row.status === 1" type="text" @click="rejectTrigger(scope.row)">拒绝</el-button>
                                <el-button v-if="scope.row.status === 3" type="text" @click="checkReject(scope.row)">拒绝理由</el-button>
                                <el-button v-if="scope.row.status !== 1" type="text" class="delete-button" @click="delTrigger(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="table-pagination" v-show="total_number > 10">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listParam.page_index"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="listParam.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_number">
                        </el-pagination>
                    </div>
                </div>
        </div>
        <transition name="el-fade-in-linear" >
                <div class="masking" :class="{ activeLive: isActive }">
                    <div class="maskingBox"
                        v-loading="viewLoading.status"
                        :element-loading-text="viewLoading.txt"
                    >
                        <div class="masking_h">
                            <span>视频预览</span>
                            <i class="el-icon-close" @click="viewClose"></i>
                        </div>
                        <div class="masking_c">
                            <nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
                            </nativeVideo>
                        </div>
                    </div>
                </div>
            </transition>
            <transition name="el-fade-in-linear" lock-scroll="false" >
                <div class="masking" :class="{ activeLive: isPDFActive }">
                    <div class="maskingBox">
                        <div class="masking_h">
                            <span>文档预览</span>
                            <i class="el-icon-close" @click="viewPDFClose"></i>
                        </div>
                        <div class="masking-document">
                            <div class="pdf-View">
                                <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
            
            <image-viewer
                v-if="imagePreview.showViewer"
                :initial-index="imageIndex"
                :on-close="closeViewer"
                :url-list="imagePreview.previewSrcList">
            </image-viewer>

            <el-dialog
                title="音频预览"
                :visible.sync="voiceVisible"
                width="auto"
                style="min-width:550px;"
                top="0"
                custom-class="imgVisible"
                :close-on-click-modal="false"
                :before-close="closeAudio">
                <div class="imgViewx">
                    <audio id="voicepoauy" controls="controls" :src="voiceViewUrl"  controlsList="nodownload" autoplay>
                    Your browser does not support the audio tag.
                    </audio>
                </div>
            </el-dialog>
        <!-- bengin -->
        <el-dialog
            title="拒绝理由"
            :visible.sync="rejectDescFlag"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="40%"
            >
            <div v-text="rejectDesc"></div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="rejectDescFlag = false">取 消</el-button>
            <el-button type="primary" @click="rejectDescFlag = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝理由end -->
        <!-- 拒绝bengin -->
        <el-dialog
            title="拒绝"
            :visible.sync="rejectWin"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="40%"
            >
            <div class="textarea-box">
            <el-form :model="rejectForm"  ref="rejectForm" label-width="80px" class="demo-ruleForm">
                <el-form-item label="拒绝理由" prop="txt" :rules="[{required: true,message: '请填写拒绝理由',validator: checkValue}]">
                <el-input type="textarea" placeholder="在此填写拒绝理由..." v-model="rejectForm.txt" :maxlength="100" required></el-input>
                </el-form-item>
            </el-form>
            <p class="str-num"><span v-text="rejectForm.txt.length"></span>/<span class="str-max">100</span></p>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="rejectWinHide">取 消</el-button>
            <el-button type="primary" @click="reject">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝end -->
    </div>
</template>
<script>
import nativeVideo from '../../public/nativeVideo'

    export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')),
            platform_id: "",
            keyword: "",
            platformList: [],
            loading: {
                status: false,
                txt: "获取数据..."
            },
            total_number: 0,
            listData: [],
            listParam: {
                type: 4,
                platform_id: 0,
                keyword: "",
                status: "",
                page_index: 1,
                page_size: 10
            },
            status: -1,
            rejectWin: false /*拒绝弹窗 */,
            rejectForm: {
                txt: "" /*拒绝理由填写 */
            },
            rejectObj: null /*拒绝对象 */,
            showVideoPlayer: false,
            playParam: { play_url: "" },
            rejectDescFlag: false,
            rejectDesc: "",



            isActive: true,
            isPDFActive: true,
            viwPdfParam:{
                src:'',
                loadedRatio: 0,
                page: 1,
                numPages: 0,
                rotate: 0,
            },
            imgVisible: false,
            imgViewUrl:'',
            voiceVisible:false,
            voiceViewUrl:'',
            viewLoading:{
                status:false,
                txt:'加载数据...'
            },
            showVideoPlayer:false,
            playParam:{play_url:'',},
        };
    },
    created() {
        this.getList();
        if (Object.is(this.user_level, 0)) {
        this.get_canseeposition();
        }
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
            /**
         * 关闭音频播放
         */
        closeAudio() {
            this.voiceVisible = false;
            document.getElementById("voicepoauy").pause();
        },
            vivew(row) {
                this.$router.push("/resources/exam/examinationPaper-view/" + row.res_id +"&platform-check")
            },
        checkValue(rule, value, callback) {
        if (!checkSpace(value)) {
            callback(new Error("请输入有效值"));
        } else {
            callback();
        }
        },
        get_canseeposition() {
        const success = res => {
            this.platformList = res.data.data;
        };
        this.$ajax.get("api/level/get_canseeposition_school", {
            params: {},
            func: { success: success }
        });
        },
        getList() {
        this.loading.status = true;
        let params = this.listParam;
        const success = res => {
            this.loading.status = false;
            this.listData = res.data.data;
            this.total_number = res.data.data_sum;
        };
        this.$ajax.get("api/level/push_receive_list", {
            params: params,
            func: { success: success }
        });
        },
        search() {
        this.listParam.status = this.status;
        this.listParam.platform_id = this.platform_id;
        this.listParam.keyword = this.keyword;
        this.listParam.page_index = 1;
        this.getList();
        },
        reset() {
        this.platform_id = "";
        this.keyword = "";
        this.status = -1;
        this.listParam = {
            type: 4,
            platform_id: 0,
            keyword: "",
            status: "",
            page_index: 1,
            page_size: 10
        };
        this.getList();
        },
        handleSizeChange(size) {
        this.listParam.page_size = size;
        this.getList();
        },
        handleCurrentChange(page) {
        this.listParam.page_index = page;
        this.getList();
        },
        pass(id) {
        /*批准*/
        let params = {
            id: id
        };
        const success = res => {
            this.$message.success(res.msg);
            this.getList();
        };
        this.$ajax.post("api/level/approve_pushed_receive", params, {
            func: { success: success }
        });
        },
        passTrigger(data) {
        /*批准提示 */
        let tipsTxt = `确定批准${data.res_name}通过审核吗？`;
        this.$confirm(tipsTxt, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(() => {
            this.pass(data.id);
            })
            .catch(() => {
            this.$message({
                type: "info",
                message: "已取消批准"
            });
            });
        },
        rejectTrigger(data) {
        /*拒绝弹窗 */
        this.rejectWin = true;
        this.rejectObj = data;
        },
        rejectWinHide() {
        /*隐藏拒绝弹窗 */
        this.rejectWin = false;
        this.rejectObj = null;
        this.rejectForm.txt = "";
        },
        reject() {
        /*拒绝 */
        let params = {
            id: this.rejectObj.id,
            comment: this.rejectForm.txt
        };
        const success = res => {
            this.$message.success(res.msg);
            this.rejectWinHide();
            this.getList();
        };
        this.$refs[`rejectForm`].validate(valid => {
            if (valid) {
            this.$ajax.put("api/level/refuse_pushed_receive", params, {
                func: { success: success }
            });
            } else {
            return;
            }
        });
        },
        del(id) {
            let params = {
                id: id,
                type: 1
            };
            const success = res => {
                this.$message.success(res.msg);

                if (this.listData.length - this.rowLen === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index-- ;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }

                this.getList();
            };
            this.$ajax.delete("api/level/delete_pushed_receive", {
                params: params,
                func: { success: success }
            });
        },
        delTrigger(data) {
            /*删除提示 */
            let tipsTxt = `确认删除${data.res_name}吗？`;
            this.$confirm(tipsTxt, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.del(data.id);
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },
    pdfPageChange(val){
                    this.viwPdfParam.page  = val;
                },
                error: function(err) {
                    //this.$message.error('读取文件失败');
                    //console.log(err);
                },

                //资源预览转发
                viewResource( obj ){
            let jsonObj = JSON.parse(obj.data);
                    this.viewLoading.status = true;
                    //视频预览
                    if( parseInt(jsonObj.file_type) === 6 ){
                        this.isActive = false
                    }
                    //图片预览
                    else if( parseInt(jsonObj.file_type) === 3 ) {
                        this.imgVisible  = true;
                    }
                    //文档预览
                    else if( parseInt(jsonObj.file_type) === 1 ){
                        this.isPDFActive = false
                    }
                    //音频预览
                    else if( parseInt( jsonObj.file_type ) === 5 ){
                        this.voiceVisible = true;
                    }else{
                        this.$message.warning("不支持预览的资源类型")
                        return false;
                    }
                    let success = ( data => {
                        var result  = data.data;
                        //视频预览
                        if( parseInt(result.file_type) === 6 ){
                            this.videoView(result.path);
                        }
                        //图片预览
                        else if( parseInt(result.file_type) === 3 ) {
                            this.imgView(result.path);
                        }
                        //文档预览
                        else if( parseInt(result.file_type) === 1 ){
                            this.pdfView( result.path);
                        }
                        //音频预览
                        else if( parseInt( result.file_type ) === 5 ){
                            this.voiceView(result.path)
                            //this.$message.warning("不支持预览的资源类型")
                        }else{
                            this.$message.warning("不支持预览的资源类型")
                        }
                    })
                    let fail = (data => {
                        this.viewLoading.status = false;
                        this.$message.error(data.msg)
                    })
                    this.$ajax.get('api/resource/view_info',{params: {id:jsonObj.id,is_video:jsonObj.is_video},func:{success:success,fail:fail}})

                },
                voiceView(url){
                    this.voiceViewUrl = url;
                    document.getElementById("voicepoauy").load();	
                },
                imgView(url){
                    this.imgViewUrl = url;
                    this.imagePreview.showViewer = true;
                    this.imagePreview.previewSrcList = [url];
                },
                closeViewer() {
                    this.imagePreview.showViewer = false;
                },
                //pdf预览
                pdfView(url){
                    this.viwPdfParam.src =  (url)
                    // this.viwPdfParam.src =  pdf.createLoadingTask(url)
                },
                viewPDFClose(){
                    this.isPDFActive = true
                },
                //关闭视频预览
                viewClose(){
                    this.showVideoPlayer = false;
                    this.isActive = true
            
                },
                //视频预览
                videoView(url){
                    this.showVideoPlayer = true;
                    this.playParam.play_url = url;
                },
        checkReject(data) {
        this.rejectDescFlag = true;
        this.rejectDesc = data.comment;
        }
    },
    components: {
        nativeVideo,
        // pdf
    }
    };
</script>
<style lang="scss">
    .exam-push-check {
    .textarea-box {
        position: relative;
        .el-textarea__inner {
        min-height: 120px !important;
        resize: none;
        }
        .str-num {
        position: absolute;
        padding: 0;
        margin: 0;
        left: 0;
        bottom: 5px;
        right: 15px;
        text-align: right;
        .str-max {
            color: #ddd;
        }
        }
    }
    .el-table__body-wrapper table tbody {
                td:nth-child(8) {
                    padding: 0;
                }
            }
            .masking{
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transition: .5s;
                background: rgba(0,0,0,.3);
                z-index: 4;
                .maskingBox{
                    position: absolute;
                    top: 15%;
                    left: 50%;
                    width: 800px;
                    margin-left: -400px;
                    background: #fff;
                }
                .masking_h{
                    padding: 10px 15px;
                    background: #348EFC;
                    text-align: center;
                    text-align-last: justify;
                    >span,
                    >i{
                        font-size: 16px;
                        text-align-last: initial;
                        display: inline-block;
                        vertical-align: middle;
                        color: #fff;
                    }
                    >i{
                        cursor: pointer;
                    }
                }

            }

            .masking_c{
                height: 450px;
                .el-pagination{
                    padding-bottom: 20px;
                }
            }

            .activeLive{
                opacity: 0;
                visibility: hidden;
            }

            .imgVisible{
                display: inline-block;
                vertical-align: middle;
                background: none;
                text-align: left;
                min-width: 550px;
                min-height: 550px;
                background: rgba(109, 116, 125, 0.78);
                margin: 0;
                .el-dialog__header{
                    // display: none;
                }
                .el-dialog__body{
                    text-align: center;
                    padding: 0;
                    img{
                        max-width: 100%;
                    }
                }
            }
            .el-dialog__wrapper{
                text-align: center;
            }
    }
</style>

